<template>
  <div>
    <el-row :gutter="9">
      <el-form
        ref="userTraining"
        :model="userTraining"
        size="medium"
        label-width="100px"
        label-position="left"
        style="margin-left: 20px">
        <el-form-item prop="userId" label="用户姓名">
          <el-select
            v-model="userTraining.userId"
            :style="{width: '25%'}"
            placeholder="请选择用户"
            filterable
            clearable>
            <el-option v-for="(user,key) in userList" :key="key" :value="user.id" :label="user.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="靶场名称" prop="trainingId">
          <el-select v-model="userTraining.trainingId" :style="{width: '25%'}" placeholder="请选择靶场" filterable clearable>
            <el-option v-for="(training,key) in trainingList" :key="key" :value="training.id" :label="training.trainingName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="解析状态" prop="processStatus">
          <el-select v-model="userTraining.processStatus" clearable placeholder="请选择">
            <el-option :value="0" label="未使用解析"/>
            <el-option :value="1" label="已使用解析"/>
          </el-select>
        </el-form-item>
        <el-form-item label="通过状态" prop="passStatus">
          <el-select v-model="userTraining.passStatus" clearable placeholder="请选择">
            <el-option :value="0" label="未通过"/>
            <el-option :value="1" label="已通过"/>
          </el-select>
        </el-form-item>
        <el-col :span="24">
          <el-form-item label="分数" prop="score">
            <el-input v-model="userTraining.score" :style="{width: '25%'}" placeholder="请输入靶场分数" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="addOrUpdate">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import userTraining from '../../api/userTraining'
import user from '../../api/user'
import training from "../../api/training";

export default {
  data() {
    return {
      userTraining: {
        userId: '',
        trainingId: '',
        processStatus: undefined,
        passStatus: undefined,
        score: undefined
      },
      userTrainingList: [],
      userList: [],
      trainingList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.listUser()
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id
      this.selectUserTrainingById(id)
    }
    this.listTraining()
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id
      this.selectUserTrainingById(id)
    }
  },
  mounted() {
  },
  methods: {
    resetForm() {
      this.$refs['userTraining'].resetFields()
    },
    listUser() {
      user.listAll().then(result => {
        this.userList = result.data
        console.log(this.userList)
      })
    },
    listTraining() {
      training.listAll().then(result => {
        this.trainingList = result.data
        console.log(this.trainingList)
      })
    },
    addOrUpdate() {
      this.$refs['userTraining'].validate((valid) => {
        if (valid) {
          if (this.userTraining.id != null) {
            this.updateUserTraining()
          } else {
            this.addUserTraining()
          }
        } else {
          console.log('错误的上传!!')
          return false
        }
      })
    },
    updateUserTraining() {
      console.log('update')
      userTraining.update(this.userTraining).then(res => {
        if (res.data != null) {
          this.$message.success('修改成功')
          this.$router.push({ path: '/userTraining/list' })
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    addUserTraining() {
      console.log('save')
      userTraining.save(this.userTraining).then(res => {
        if (res.data != null) {
          this.$message.success('新增成功')
          this.$router.push({ path: '/userTraining/list' })
        } else {
          this.$message.error('新增失败')
        }
      })
    },
    selectUserTrainingById(id) {
      userTraining.selectUserTrainingById(id).then(res => {
        this.userTraining = res.data
      })
    }
  }
}

</script>
<style>
</style>

